<template>
  <div class='user'>
    <div class='header'>
      <el-select v-model='group' placeholder='小组'>
        <el-option
          v-for='item in groupList'
          :key='item.groupId'
          :label='item.groupName'
          :value='item.groupId'>
        </el-option>
      </el-select>
      <el-select v-model='sprint' placeholder='迭代'>
        <el-option
          v-for='item in sprintList'
          :key='item.sprintId'
          :label='item.sprintName'
          :value='item.sprintId'>
        </el-option>
      </el-select>
      <search-box class='searchBox' @search='search'></search-box>
    </div>
    <div class='content'>
      <el-table
        :data='logList'
        style='width: 100%'>
        <el-table-column
          prop='logName'
          label='日志名称'
          width='190'>
        </el-table-column>
        <el-table-column
          prop='sprintName'
          label='迭代'
          width='150'>
        </el-table-column>
        <el-table-column
          prop='groupName'
          label='小组'
          width='150'>
        </el-table-column>
        <el-table-column
          prop='logOperator'
          label='发布者'
          width='150'>
        </el-table-column>
        <el-table-column
          prop='logPublishtime'
          label='发布时间'
          width='180'>
        </el-table-column>
        <el-table-column label='操作'>
        <template slot-scope='scope'>
          <el-button
            size='mini'
            style='backgroundColor:#3c8dbc;color:#fff'
            @click='checkLogDetail(scope.$index, scope.row)'>查看日志</el-button>
          <el-button
            size='mini'
            type='danger'
            @click='deleteLog(scope.$index, scope.row)'>删除日志</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <!-- <el-pagination
      layout='prev, pager, next'
      @current-change='changePage'
      :page-count='pages'>
    </el-pagination> -->
  </div>
</template>
<script>
import searchBox from '@/components/searchBox'
import { _getGroupList, _getSprintList, _getLogList, _deleteLog } from '../common/api'
import config from '../common/config'

export default {
  components: {
    searchBox
  },
  created () {
    this.getGroupList()
    this.getSprintList()
    this.getLogList()
  },
  data () {
    return {
      pageNum: 1,
      pages: 1,
      keyWords: '',
      group: '',
      sprint: '',
      groupList: [],
      sprintList: [],
      logList: []
    }
  },
  watch: {
    $route () {
      this.getLogList()
    },
    sprint (sprintId) {
      // this.$router.push(`/log?sprintId=${sprintId}`)
      this.$router.push({
        path: '/log',
        query: {
          ...this.$route.query,
          sprintId
        }
      })
    },
    group (groupId) {
      this.$router.push({
        path: '/log',
        query: {
          ...this.$route.query,
          groupId
        }
      })
    }
  },
  methods: {
    getGroupList () {
      _getGroupList().then(res => {
        this.groupList = res.filter(item => item.group_status !== 0)
      })
    },
    getSprintList () {
      _getSprintList().then(res => {
        this.sprintList = res.reverse()
      })
    },
    getLogList () {
      let query = this.$route.query
      query = {
        ...query,
        keyWords: this.keyWords
      }
      _getLogList(query).then(res => {
        this.logList = res.filter(item => (item.logStatus === 1))
          .sort((a, b) => (a.logPublishtime > b.logPublishtime ? -1 : 1))
          .map(item => ({
            ...item,
            logPublishtime: this.$moment(item.logPublishtime).format('YYYY-MM-DD')
          }))
      }).catch(e => {
        this.$message({
          type: 'error',
          message: '获取日志错误'
        })
      })
    },
    changePage (page) {
      // this.pageNum = page
      // this.getUserList()
    },
    search (keyWords) {
      this.keyWords = keyWords
      // this.pageNum = 1
      this.getLogList()
    },
    checkLogDetail (index, row) {
      this.$router.push(`/logDetails?logId=${row.logId}`)
    },
    deleteLog (index, row) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _deleteLog(row.logId).then(res => {
          if (+res.state === config.SUCCESS) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getLogList()
          } else {
            this.$message({
              type: 'error',
              message: res.details
            })
          }
        })
      })
    }
  }
}
</script>
<style lang='sass'>
.user
  background: #fff
  height: 100%
  padding: 20px
  box-sizing: border-box
  .searchBox
    display: inline-block
  .el-select
    width: 100px
    vertical-align: top
  .el-select .el-input input
    height: 37px
  .content
    margin: 30px auto
</style>
